<template>
  <div>
    <el-card class="box-card" style="margin: 15px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="input">
            <el-input placeholder="请输入内容" v-model="search" class="input-with-select" clearable>
                <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 130px;" clearable>
                <el-option label="订单编号" value="num"></el-option>
                <el-option label="下单人" value="orderpersonname"></el-option>
                <el-option label="所属公司" value="frombus"></el-option>
                </el-select>
            </el-input>
          </div>
      </el-col>
      <el-col :span="7" style="display: flex;">
      <el-date-picker
      v-model="time"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
    <div style="margin-left:20px;">
      <el-button type="primary" icon="el-icon-search" v-on:click="searchdata"></el-button>
    </div>
      </el-col>
      </el-row>
    </el-card>
    
    <el-card style="margin: 15px;">
      <el-row>
        <el-col :span="8">
          <el-button type="warning" icon="el-icon-s-promotion">合并订单</el-button>
          <el-button type="warning">导出订单</el-button>
          <el-button type="primary" icon="el-icon-refresh-right" @click="renewdata()">刷新数据</el-button>
          <!--<download-excel :data="exceldata" :fields="json_exceldata" header="订单详情" name="订单详情.xls">
            <el-button type="warning" v-on:click="handlexcel">导出</el-button>
          </download-excel>-->
        </el-col>
      </el-row>
    <el-table
    :data="orderdata"
    stripe
    style="width: 100%;">
    <el-table-column
    type="selection"
    width="55">
    </el-table-column>
    <el-table-column
      prop="num"
      label="订单编号"
      width="160">
    </el-table-column>
    <el-table-column
      prop="orderpersonname"
      label="下单人名字"
      width="220">
    </el-table-column>
    <el-table-column
      prop="frombus"
      label="所属公司"
      width="240">
    </el-table-column>
    <el-table-column
      prop="telphone"
      label="联系电话"
      width="190">
    </el-table-column>
    <el-table-column
      prop="submittime"
      label="下单时间"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="sumprice"
      label="订单金额"
      sortable
      width="160">
    </el-table-column>
    <el-table-column
      prop="ishandle"
      label="处理状态"
      width="160"
      >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.ishandle==0 ? 'primary' : 'success'"
          disable-transitions>{{scope.row.ishandle==0?'未处理':'已处理'}}
        </el-tag>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :total="total"
      :page-size="itemnum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 12]"
      layout="total, sizes, prev, pager, next, jumper"
      background
      style="margin-top:20px;"
      >
    </el-pagination>
  </el-card>
  </div>
</template>

<script>
import { getorders,searchorder,setnewgroup } from '@/api';
export default {
    name:'orderlist',
    data(){
      return {
        search:'',
        select:'',
        time:'',
        total:0,
        itemnum:10,
        orderdata:[],
        exceldata:[],
        //引入导出插件，但是不知道为什么我死活引用不了？？？
        json_exceldata:{
          "订单编号":"num",
          "下单人名字":"orderpersonname",
          "所属公司":"frombus",
          "联系电话":"telphone",
          "下单时间":"submittime",
          "订单金额":"sumprice",
          "处理状态":"ishandle"
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    methods:{
      searchdata(){
        if(this.select===''&&this.search===''&&this.time==='') 
        this.$notify({
            title: '警告',
            message: '请先输入要查找的数据！',
            type: 'warning',
            duration: 2500
        });
        //记录一下自己不按照事件分析按照逻辑分析结果回头根据事件写逻辑发现逻辑白写【妈的我真服了】
        else if((this.select===''||this.search==='')&&this.time==='') 
        this.$notify({
            title: '警告',
            message: '请输入一个确定的值或确定查找时间范围！',
            type: 'warning',
            duration: 2500
        });
        else {
          searchorder({type:this.select,search:this.search,timeranges:this.time}).then(res => {
          if(res.data.status!==200){
            this.$notify.error({
            title: '错误',
            message: '找不到数据，请核实输入！'
          });
          }else{
            this.orderdata = res.data.data
            this.total = res.data.total
            this.$notify({
              title: '成功',
              message: '已为您找到该数据',
              type: 'success'
            });
            this.search = ''
            this.select = ''
            this.timeranges = ''
          }}).catch(err => console.log(err))
        }
      },
      handlexcel(){
        if(this.exceldata==='') this.exceldata = this.orderdata
        else console.log(this.exceldata)
      },
      handleCurrentChange(val){
        const va = (val-1)*this.itemnum
        //重新向数据库获取指定偏移量的数据
        this.getorderdata({offset:va,limit:this.itemnum})
      },
      //表单条数改变时传递条数信息
      handleSizeChange(val){
        this.itemnum = val
        this.getorderdata({limit:val})
      },
      getorderdata(config){
        getorders(config).then(res => {
          this.orderdata = res.data.data
          this.total = res.data.total
          this.exceldata = JSON.stringify(res.data.data)
        }).catch(err => console.log(err))
      },
      renewdata(){
        this.$notify.info({
          title: '消息',
          message: '正在重新渲染数据请耐心等待'
        });
        setTimeout(() => {
          this.getorderdata()
          this.$notify({
          title: '成功',
          message: '渲染成功',
          type: 'success'
        });
        },2500);
      }
    },
    mounted(){
      this.getorderdata()
    }
}
</script>

<style>

</style>